<template>
    <el-dialog class="lucky-send-dialog" v-model="visible" title="发货" width="600px">
        <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
            <el-row>
                <el-col>
                    <el-form-item label="发货方式" prop="deliveryMethod">
                        <el-radio-group v-model="form.deliveryMethod" @change="handleSendAwardMethodChange">
                            <el-radio :label="1">物流配送</el-radio>
                            <el-radio :label="2">线下配送</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col v-if="form.deliveryMethod == 1">
                    <el-form-item label="快递公司" prop="logisticsId">
                        <el-select
                            style="width: 320px"
                            v-model="form.logisticsId"
                            filterable
                            reserve-keyword
                            clearable
                            placeholder="请选择快递公司（可搜索）">
                            <el-option
                                v-for="item in logisticsList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="form.deliveryMethod == 1">
                    <el-form-item label="快递单号" prop="logisticsNumber">
                        <el-input
                            style="width: 320px"
                            v-model="form.logisticsNumber"
                            maxlength="20"
                            show-word-limit
                            placeholder="请填写快递单号"></el-input>
                    </el-form-item>
                </el-col>
                <!-- todo:发货方式 -->
                <el-col>
                    <el-form-item label="收货信息" prop="awardName">
                        <div>
                            <div>
                                <span>{{ addressInfo?.name }}</span
                                ><span style="margin-left: 8px">{{ addressInfo?.mobile }}</span>
                            </div>
                            <div>
                                {{ addressInfo?.address }}
                            </div>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleVisible()">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, onMounted, unref } from 'vue';
import request from '@/request/index';
import { cloneDeep, isNotEmpty } from '@/commons/utils';
import { useRoute } from 'vue-router';

const route = useRoute();

const emit = defineEmits(['handle-confirm']);

let logisticsList = reactive([]);
let form = reactive({
    deliveryMethod: 1, //1物流配送 2线下配送
    logisticsId: null, //快递公司ID
    logisticsNumber: '' //快递单号
});
const baseForm = cloneDeep(form);
let addressInfo = reactive({});
let visible = ref(false);
const formRef = ref();

const rules = computed(() => {
    const baseRuleList = {
        logisticsNumber: [
            { required: true, message: '请输入快递单号', trigger: 'blur' },
            { max: 20, message: '最长不超过20个字', trigger: 'blur' }
        ],
        logisticsId: [{ required: true, trigger: 'change', message: '请选择快递公司' }],
        deliveryMethod: [{ required: true, trigger: 'change', message: '请选择发货方式' }]
    };
    return { ...baseRuleList };
});

let id = ref();

const handleDialog = row => {
    Object.keys(baseForm).forEach(key => {
        form[key] = baseForm[key];
    });
    Object.assign(addressInfo, cloneDeep(row.addressInfo));
    id.value = row.id;
    handleVisible(true);
};

const handleSendAwardMethodChange = val => {
    if (val == 2) {
        form.logisticsId = null;
        form.logisticsNumber = '';
    }
};

const handleVisible = (isVisible = false) => {
    visible.value = isVisible;
};

const clearValidate = field => {
    unref(formRef).clearValidate(field);
};

const handleConfirm = async () => {
    if (!unref(formRef)) return;
    await unref(formRef).validate(async (valid, fields) => {
        if (valid) {
            // todo:新增or编辑
            await request('activityDrawDelivery', {
                id: id.value,
                ...form
            });
            emit('handle-confirm');
            handleVisible(false);
        }
    });
};

const getLogisticsList = async () => {
    let res = await request('getLogisticsListServ');
    logisticsList.length = 0;
    Object.assign(logisticsList, res.data || []);
};

onMounted(() => {
    getLogisticsList();
});

defineExpose({
    handleDialog
});
</script>

<style lang="scss" scoped></style>
